<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .el-header, .el-footer {
            color: #333;

        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="app" style="width: 100%;height: 100%;">
    <el-container>
        <el-main width="80%">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="userId"
                            label="ID"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="用户名"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="销售额"
                            width="*">
                    </el-table-column>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
    </el-container>
</div>


<script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                tableData: [
                    {
                        userId:'',
                        userName:'',
                        price:''
                    }
                ],
            }

        },
        // 初始化函数
        created:function(){
            this.getUserId();
            this.getUsername();
            this.getUserSale();
            console.log(this.tableData)
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            getUserId(){
                axios.post(
                    '/member/getUserId'
                ).then(function (res) {
                    console.info(res.data);
                    app.tableData[0].userId=res.data;
                    axios.post(
                        '/member/getSale',
                        'userId='+ res.data
                    ).then(function (res) {
                        console.info(res.data);
                        app.tableData[0].price=res.data;
                    });
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getUsername(){
                axios.post(
                    '/member/getUserName'
                ).then(function (res) {
                    console.info(res.data);
                    app.tableData[0].userName=res.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getUserSale(){

            },


        }
    })
</script>
</body>
</html>